<template>
  <div>
    <!-- <div class="bg-white grid-content">
      <el-form :inline="true" :model="zyqjgForm" class="demo-form-inline">
        <el-form-item label="日期:">
          <el-date-picker
            v-model="searchDate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="formSearch()">查询</el-button>
          <el-button type="success" @click="exportExcel()">下载</el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <div class="bg-white grid-content">
      <div style="overflow: hidden">
        <div class="mytitle">
          <svg-icon icon-class="A5" class="myIcon" />
          作业区油水井作业情况统计
        </div>
      </div>

      <el-tabs v-model="activeName" type="card">
        <!-- <el-tabs v-model="activeName" type="card" @tab-click="handleMenuClick"> -->
        <el-tab-pane label="油井情况" name="first">
          <!--油井情况界面-->
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            :header-cell-style="{ background: '#F5F7FA', color: '#909399' }"
          >
            <el-table-column align="center" prop="rq" label="填表日期">
            </el-table-column>
            <el-table-column
              align="center"
              prop="yjzyjqk"
              label="油井作业井情况"
            >
              <el-table-column align="center" prop="jbj" label="检泵井">
                <el-table-column align="center" prop="jbjJs" label="井数（口）">
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="jbjRyx"
                  label="日影响（t/d）"
                >
                </el-table-column>
              </el-table-column>
              <el-table-column
                align="center"
                prop="jyj"
                label="积压井"
                rolspan="2"
              >
                <el-table-column align="center" prop="jyjJs" label="井数（口）">
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="jyjRyx"
                  label="日影响（t/d）"
                >
                </el-table-column>
              </el-table-column>
              <el-table-column align="center" prop="cyj" label="测压井">
                <el-table-column align="center" prop="cyjJs" label="井数（口）">
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="cyjRyx"
                  label="日影响（t/d）"
                >
                </el-table-column>
              </el-table-column>
              <el-table-column align="center" prop="csj" label="措施井">
                <el-table-column align="center" prop="csjFwyl" label="缝网压裂">
                  <el-table-column
                    align="center"
                    prop="csjFwylJs"
                    label="井数（口）"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="csjFwylRyx"
                    label="日影响（t/d）"
                  >
                  </el-table-column>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="csjLjfj"
                  label="邻井封井/套管调查"
                >
                  <el-table-column
                    align="center"
                    prop="csjLifjJs"
                    label="井数（口）"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="csjLifjRyx"
                    label="日影响（t/d）"
                  >
                  </el-table-column>
                </el-table-column>
                <el-table-column align="center" prop="csjCsph" label="措施配合">
                  <el-table-column
                    align="center"
                    prop="csjCsphJs"
                    label="井数（口）"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="csjCsphRyx"
                    label="日影响（t/d）"
                  >
                  </el-table-column>
                </el-table-column>
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="水井情况" name="second">
          <!--水井情况界面-->
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            :header-cell-style="{ background: '#F5F7FA', color: '#909399' }"
          >
            <el-table-column align="center" prop="rq" label="填表日期">
            </el-table-column>
            <el-table-column
              align="center"
              prop="sjzyjqk"
              label="水井作业井情况"
            >
              <el-table-column align="center" prop="" label="">
                <el-table-column align="center" prop="cpj" label="重配井">
                  <el-table-column
                    align="center"
                    prop="cpjJs"
                    label="井数（口）"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="cpjRpz"
                    label="日配注(m3/d)"
                  >
                  </el-table-column>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="fcxfj"
                  label="分层、细分井"
                >
                  <el-table-column
                    align="center"
                    prop="fcxfjJs"
                    label="井数（口）"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="fcxfjRpz"
                    label="日配注(m3/d)"
                  >
                  </el-table-column>
                </el-table-column>
                <el-table-column align="center" prop="dxj" label="大修井">
                  <el-table-column
                    align="center"
                    prop="dxjJs"
                    label="井数（口）"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="dxjRpz"
                    label="日配注(m3/d)"
                  >
                  </el-table-column>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="qtsjzy"
                  label="其他水井作业"
                >
                  <el-table-column
                    align="center"
                    prop="qtsjzyJs"
                    label="井数（口）"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="qtsjzyRpz"
                    label="日配注(m3/d)"
                  >
                  </el-table-column>
                </el-table-column>
              </el-table-column>
              <el-table-column
                align="center"
                prop="ycfawss"
                label="已出方案未实施"
              >
                <el-table-column
                  align="center"
                  prop="ycfawssJs"
                  label="井数（口）"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="ycfawssRpz"
                  label="日配注(m3/d)"
                >
                </el-table-column>
              </el-table-column>
              <el-table-column
                align="center"
                prop="wcfawss"
                label="未出方案未实施"
              >
                <el-table-column
                  align="center"
                  prop="wcfawssJs"
                  label="井数（口）"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="wcfawssRpz"
                  label="日配注(m3/d)"
                >
                </el-table-column>
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="油井详情" name="third">
          <!-- 油井详情界面 -->
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            :header-cell-style="{ background: '#F5F7FA', color: '#909399' }"
          >
            <el-table-column align="center" prop="rq" label="填表日期">
            </el-table-column>
            <el-table-column align="center" prop="yjzy" label="油井作业">
              <el-table-column align="center" prop="yjzy_zcl" label="正处理">
                <el-table-column type="index" label="序号"> </el-table-column>
                <el-table-column align="center" prop="yjzyZclXd" label="小队">
                </el-table-column>
                <el-table-column align="center" prop="yjzyZclJh" label="井号">
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="yjzyZclSgrq"
                  label="施工日期"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="yjzyZclRyx"
                  label="日影响（t/d）"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="yjzyZclJyyy"
                  label="积压原因"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="yjzyZclSgcs"
                  label="施工措施"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="yjzyZclMqjd"
                  label="目前进度"
                >
                </el-table-column>
                <el-table-column align="center" prop="yjzyZclBz" label="备注">
                </el-table-column>
              </el-table-column>
              <el-table-column align="center" prop="yjz_dcl" label="待处理">
                <el-table-column type="index" label="序号"> </el-table-column>
                <el-table-column align="center" prop="yjzyDclXd" label="小队">
                </el-table-column>
                <el-table-column align="center" prop="yjzyDclJh" label="井号">
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="yjzyDclJyrq"
                  label="积压日期"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="yjzyDclRyx"
                  label="日影响（t/d）"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="yjzyDclJyyy"
                  label="积压原因"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="yjzyDclXbcs"
                  label="下步措施"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="yjzyDclMqjd"
                  label="目前进度"
                >
                </el-table-column>
                <el-table-column align="center" prop="yjzyDclBz" label="备注">
                </el-table-column>
              </el-table-column>
              <el-table-column align="center" prop="yjzy_csph" label="措施配合">
                <el-table-column type="index" label="序号"> </el-table-column>
                <el-table-column align="center" prop="yjzyCsphXd" label="小队">
                </el-table-column>
                <el-table-column align="center" prop="yjzyCsphJh" label="井号">
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="yjzyCsphSgrq"
                  label="施工日期"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="yjzyCsphRyx"
                  label="日影响（t/d）"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="yjzyCsphJyyy"
                  label="积压原因"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="yjzyCsphSgjd"
                  label="施工措施"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="yjzyCsphMqjd"
                  label="目前进度"
                >
                </el-table-column>
                <el-table-column align="center" prop="yjzyCsphBz" label="备注">
                </el-table-column>
              </el-table-column>
              <el-table-column align="center" prop="yjzy_cjy" label="测静压">
                <el-table-column type="index" label="序号"> </el-table-column>
                <el-table-column align="center" prop="yjzyCjyXd" label="小队">
                </el-table-column>
                <el-table-column align="center" prop="yjzyCjyJh" label="井号">
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="yjzyCjyCyrq"
                  label="测压日期"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="yjzyCjyRyx"
                  label="日影响（t/d）"
                >
                </el-table-column>
              </el-table-column>
              <el-table-column align="center" prop="yjzy_fwyl" label="缝网压裂">
                <el-table-column type="index" label="序号"> </el-table-column>
                <el-table-column align="center" prop="yjzyFwylXd" label="小队">
                </el-table-column>
                <el-table-column align="center" prop="yjzyFwylJh" label="井号">
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="yjzyFwylSgrq"
                  label="施工日期"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="yjzyFwylRyx"
                  label="日影响（t/d）"
                >
                </el-table-column>
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="水井详情" name="fourth">
          <!--水井详情界面-->
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            :header-cell-style="{ background: '#F5F7FA', color: '#909399' }"
          >
            <el-table-column align="center" prop="rq" label="填表日期">
            </el-table-column>
            <el-table-column align="center" prop="sjzy" label="水井作业">
              <el-table-column
                align="center"
                prop="sjzy_zzzyj"
                label="正在作业井"
              >
                <el-table-column type="index" label="序号"> </el-table-column>
                <el-table-column align="center" prop="sjzyZzzyjXd" label="小队">
                </el-table-column>
                <el-table-column align="center" prop="sjzyZzzyjJh" label="井号">
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="sjzyZzzyjSgrq"
                  label="施工日期"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="sjzyZzzyjRpz"
                  label="日配注(m3/d)"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="sjzyZzzyjCslx"
                  label="措施类型"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="sjzyZzzyjMqjd"
                  label="目前进度"
                >
                </el-table-column>
                <el-table-column align="center" prop="sjzyZzzyjBz" label="备注">
                </el-table-column>
              </el-table-column>
              <el-table-column
                align="center"
                prop="sjzy_ycfawss"
                label="已出方案未实施"
              >
                <el-table-column type="index" label="序号"> </el-table-column>
                <el-table-column
                  align="center"
                  prop="sjzyYcfawssXd"
                  label="小队"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="sjzyYcfawssJh"
                  label="井号"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="sjzyYcfawssCfarq"
                  label="出方案日期"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="sjzyYcfawssCsyy"
                  label="措施原因"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="sjzyYcfawssBz"
                  label="备注"
                >
                </el-table-column>
              </el-table-column>
              <el-table-column
                align="center"
                prop="sjzy_wcfawss"
                label="未出方案未实施"
              >
                <el-table-column type="index" label="序号"> </el-table-column>
                <el-table-column
                  align="center"
                  prop="sjzyYcfawssXd"
                  label="小队"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="sjzyYcfawssJh"
                  label="井号"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="sjzyYcfawssCsyy"
                  label="措施原因"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="sjzyYcfawssBz"
                  label="备注"
                >
                </el-table-column>
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <!-- 分页器 -->
      <el-pagination
        align="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="[1, 5, 10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import zyqysjzyqktjApi from "@/api/zyqysjzyqktj";
import Bolb from "@/vendor/Blob";
import Export2Excel from "@/vendor/Export2Excel";
import XLSX from "xlsx-style";
export default {
  data() {
    return {
      isInput: false,
      options: [
        { value: "油井情况", label: "油井情况" },
        { value: "水井情况", label: "水井情况" },
        { value: "油井详情", label: "油井详情" },
        { value: "水井详情", label: "水井详情" },
      ],

      isAble: false,
      //数据总条数
      total: 0,
      //当前页码
      pageNo: 1,
      // 分页数
      pageSize: 5,

      currentPageName: "油井情况",

      activeName: "first",

      //油井情况数据
      tableData: [],

      startDate: "",
      endDate: "",
      searchDate: "",
      approveStatus: "",
      //油井情况表单填报的数据
      yjqkForm: {
        approveStatus: "",
        approveBz: "",
        rq: "", //填表日期
        jbjJs: "", //检泵井—井数
        jbjRyx: "", //检泵井—日影响
        jyjJs: "", //积压井—井数
        jyjRyx: "", //积压井—日影响
        cyjJs: "", //测压井—井数
        cyjRyx: "", //测压井—日影响
        csjFwylJs: "", //措施井—缝网压裂—井数
        csjFwylRyx: "", //措施井—缝网压裂—日影响
        csjLifjJs: "", //措施井—邻井封井—井数
        csjLifjRyx: "", //措施井—邻井封井—日影响
        csjCsphJs: "", //措施井—措施配合—井数
        csjCsphRyx: "", //措施井—措施配合—日影响
      },
      //水井情况表单填报数据
      sjqkForm: {
        approveStatus: "",
        approveBz: "",
        rq: "", //填表日期
        cpjJs: "", //重配井—井数
        cpjRpz: "", //重配井—井数
        fcxfjJs: "", //分层、细分井—井数
        fcxfjRpz: "", //分层、细分井—日配注
        dxjJs: "", //大修井—井数
        dxjRpz: "", //大修井—井数
        qtsjzyJs: "", //其他水井作业_井数
        qtsjzyRpz: "", //其他水井作业_日配注
        ycfawssJs: "", //已出方案未实施_井数
        ycfawssRpz: "", //已出方案未实施_日配注
        wcfawssJs: "", //未出方案未实施_井数
        wcfawssRpz: "", //未出方案未实施_日配注
      },
      //油井详情表单填报数据
      yjxqForm: {
        approveStatus: "",
        approveBz: "",
        rq: "",
        yjzyZclXd: "", //油井作业—正处理—小队
        yjzyZclJh: "", //油井作业—正处理—井号
        yjzy_zcl_sgrq: "", //油井作业—正处理—施工日期
        yjzyZclRyx: "", //油井作业—正处理—日影响
        yjzyZclJyyy: "", //油井作业—正处理—积压原因
        yjzyZclSgcs: "", //油井作业—正处理—施工措施
        yjzyZclMqjd: "", //油井作业—正处理—目前进度
        yjzyZclBz: "", //油井作业—正处理—备注
        yjzyDclXd: "", //油井作业—待处理—小队
        yjzyDclJh: "", //油井作业—待处理—井号
        yjzyDclJyrq: "", //油井作业—待处理—积压日期
        yjzyDclRyx: "", //油井作业—待处理—日影响
        yjzyDclJyyy: "", //油井作业—待处理—积压原因
        yjzyDclXbcs: "", //油井作业—待处理—下步措施
        yjzyDclMqjd: "", //油井作业—待处理—目前进度
        yjzyDclBz: "", //油井作业—待处理—备注
        yjzyCsphXd: "", //油井作业—措施配合—小队
        yjzyCsphJh: "", //油井作业—措施配合—井号
        yjzyCsphSgrq: "", //油井作业—措施配合—施工日期
        yjzyCsphRyx: "", //油井作业—措施配合—日影响
        yjzyCsphJyyy: "", //油井作业—措施配合—积压原因
        yjzyCsphSgcs: "", //油井作业—措施配合—施工措施
        yjzyCsphMqjd: "", //油井作业—措施配合—目前进度
        yjzyCsphBz: "", //油井作业—措施配合—备注
        yjzyCjyXd: "", //油井作业—测压井—小队
        yjzyCjyJh: "", //油井作业—测压井—井号
        yjzyCjyCyrq: "", //油井作业—测压井—测压日期
        yjzyCjyRyx: "", //油井作业—测压井—日影响
        yjzyFwylXd: "", //油井作业—缝网压裂—小队
        yjzyFwylJh: "", //油井作业—缝网压裂—井号
        yjzyFwylSgrq: "", //油井作业—缝网压裂—施工日期
        yjzyFwylRyx: "", //油井作业—缝网压裂—日影响
      },
      //油井详情表单填报数据
      sjxqForm: {
        approveStatus: "",
        approveBz: "",
        rq: "",
        sjzyZzzyjXd: "", //水井作业—正在作业井—小队
        sjzyZzzyjJh: "", //水井作业—正在作业井—井号
        sjzyZzzyjSgrq: "", //水井作业—正在作业井—施工日期
        sjzyZzzyjRpz: "", //水井作业—正在作业井—日配注
        sjzyZzzyjCslx: "", //水井作业—正在作业井—措施类型
        sjzyZzzyjMqjd: "", //水井作业—正在作业井—目前进度
        sjzyZzzyjBz: "", //水井作业—正在作业井—备注
        sjzyWcfawssXd: "", //水井作业—已出方案未实施—小队
        sjzyWcfawssJh: "", //水井作业—已出方案未实施—井号
        sjzyWcfawssCfarq: "", //水井作业—已出方案未实施—出方案日期
        sjzyWcfawssCsyy: "", //水井作业—已出方案未实施—措施原因
        sjzyWcfawssBz: "", //水井作业—已出方案未实施—备注
        sjzyWcfawssXd: "", //水井作业—未出方案未实施—小队
        sjzyWcfawssJh: "", //水井作业—未出方案未实施—井号
        sjzyWcfawssCsyy: "", //水井作业—未出方案未实施—措施原因
        sjzyWcfawssBz: "", //水井作业—未出方案未实施—备注
      },

      //时间快捷选择
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },

      //编辑框是否显示
      yjqkFormVisible: false,
      sjqkFormVisible: false,
      yjxqFormVisible: false,
      sjxqFormVisible: false,

      //弹出框是否是查看
      ischeck: false,

      //弹出框标题
      myDialogTitle: "",

      //各个tab表的可见性
      yjqkVisable: true,
      sjqkVisable: true,
      yjxqVisable: true,
      sjxqVisable: true,

      value1: "",
      //获取当前日期
      currentTime: "",
    };
  },
  created() {
    this.search();
    // this.reload();
    // //this.exportExcel();
  },
  mounted() {
    this.filterTime();
    // this.initDate();
  },
  methods: {
    /**
     * 根据当前页面查询列表
     */
    async search() {
      console.log("activeName", this.activeName);
      console.log("当前页: ", this.pageNo, "每页条", this.pageSize);
      let res = await zyqysjzyqktjApi.getZyqysjzyqktjList(
        this.pageNo,
        this.pageSize,
        this.approveStatus,
        this.searchDate[0],
        this.searchDate[1]
      );
      console.log("res", res);

      if (this.activeName == "first") {
        this.tableData = res.data.records;
      } else if (this.activeName == "second") {
        this.tableData = res.data.records;
      } else if (this.activeName == "third") {
        this.tableData = res.data.records;
      } else if (this.activeName == "fourth") {
        this.tableData = res.data.records;
      }
      console.log(res.data.total);
      this.total = res.data.total;
      this.pageSize = res.data.size;
      console.log(this.total);
    },
    formSearch() {
      // console.log(this.searchDate);
      this.search();
    },
    exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/vendor/Export2Excel"); //此处把路径要写对
        // //简单表格书写

        // //添加表格id
        // var myindex = [];
        // for (var i = 0; i < this.total; i++) {
        //   myindex[i] = i + 1;
        // }
        // var newindex = myindex.map((item) => {
        //   console.log(item);
        //   return {
        //     index: item,
        //   };
        // });

        // console.log("123321", myindex);
        // console.log("newindex", newindex);
        // //将添加的序号加入到表格中形成新的mergeArr表格
        // let mergeArr = [newindex, this.tableData].reduce((prev, curr) => {
        //   return prev.map((item, index) => {
        //     return Object.assign(item, curr[index]);
        //   });
        // });
        // console.log("mergeArr", mergeArr);
        // console.log("tableData", this.tableData);
        // const tHeader = [
        //   "日期",
        //   "序号",
        //   "所在支部",
        //   "姓名",
        //   "员工编号",
        //   "身份证号",
        //   "性别",
        //   "出生日期",
        //   "学历",
        //   "最高学位",
        //   "民族",
        //   "籍贯",
        //   "手机",
        //   "邮箱",
        //   "工作单位",
        //   "家庭住址",
        //   "人员类别",
        //   "加入党组织日期",
        //   "转正日期",
        //   "人员身份",
        // ];
        // const filterVal = [
        //   "rq",
        //   "index",
        //   "szzb",
        //   "name",
        //   "ygbh",
        //   "sfzh",
        //   "sex",
        //   "csrq",
        //   "xl",
        //   "zgxw",
        //   "mz",
        //   "jg",
        //   "telephone",
        //   "email",
        //   "gzdw",
        //   "jtzz",
        //   "rylb",
        //   "jrdzzrq",
        //   "zzrq",
        //   "rysf",
        // ];
        // // console.log(this.tableData);
        // // const myindex = Array.from(Array(this.total).keys(), (n) => n + 1);
        // // var myindex = [];
        // // for (var i = 0; i < this.total; i++) {
        // //   myindex[i] = i + 1; //
        // // }

        // const list = mergeArr;
        // const data = this.formatJson(filterVal, list);

        // export_json_to_excel({
        //   header: tHeader,
        //   data: data,
        //   filename: "党员名册",
        //   autoWidth: true,
        //   bookType: "xlsx",
        // }),
        //   this.$message.success("导出报表成功！");

        //复杂表头书写
        //添加表格id
        var myindex = [];
        for (var i = 0; i < this.total; i++) {
          myindex[i] = i + 1;
        }
        var newindex = myindex.map((item) => {
          console.log(item);
          return {
            index: item,
          };
        });
        // //将添加的序号加入到表格中形成新的mergeArr表格
        let mergeArr = [newindex, this.tableData].reduce((prev, curr) => {
          return prev.map((item, index) => {
            return Object.assign(item, curr[index]);
          });
        });
        console.log("mergeArr", mergeArr);
        console.log("tableData", this.tableData);

        // const tHeader = ['日期', '姓名', '地址'];
        // // 上面设置Excel的表格第一行的标题
        //一级表头
        const multiHeader = [
          ["第二采油作业区消防器材台账", "", "", "", "", "", "", "", ""],
          ["单位:", this.unit, "", "", "", "", "", "", ""],
        ];
        //二级表头
        const tHeader = [
          "序号",
          "名称",
          "规格型号",
          "数量",
          "配备地点",
          "配备日期",
          "换药日期",
          "编号",
          "负责人",
        ];
        //表头字段
        const filterVal = [
          "index",
          "name",
          "ggxh",
          "num",
          "pbdd",
          "pbrq",
          "hyrq",
          "serialnum",
          "principal",
        ];
        //需要合并的单元格
        const merges = ["A1:I1"];
        //表头样式
        let headerStyle = [
          "A1",
          "B1",
          "C1",
          "D1",
          "E1",
          "F1",
          "G1",
          "H1",
          "I1",
        ];
        // 上面的index、nickName、name是tableData里对象的属性
        console.log(this.tableData);
        // const list = this.tableData;  //把data里的tableData存到list
        // const data = this.formatJson(filterVal, list);
        const list = mergeArr;
        const data = this.formatJson(filterVal, list);
        console.log(111111);
        console.log(list);
        console.log(data);

        export_json_to_excel({
          //header: tHeader,
          multiHeader: multiHeader,
          header: tHeader,
          merges: merges,
          headerStyle: headerStyle,
          data: data,
          filename: "第二采油作业区消防器材台账",
          autoWidth: true,
          bookType: "xlsx",
        }); //"列表excel"  是下载后的表名 可修改
        this.$message.success("导出报表成功！");
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => {
        return filterVal.map((j) => v[j]);
      });
    },

    //关闭对话框
    handleClose(done) {
      // 清空表单
      // this.$refs['syjForm'].resetFields();
      // 清空表单校验，避免再次进来会出现上次校验的记录
      this.$refs["zyqjgForm"].clearValidate();
      done();
    },
    handleClose1(done) {
      this.urlFile = "";
      this.fileList = [];
      done();
    },
    // 弹框关闭触发
    close(formName) {
      this.dialogFormVisible = false;
      // 清空表单
      // this.$refs[formName].resetFields();
      // 清空表单校验，避免再次进来会出现上次校验的记录
      this.$refs[formName].clearValidate();
    },
    onSubmit() {
      console.log("submit!");
    },
    handleClick(row, handle) {
      if (this.currentPageName === "作业区机关") {
        // 代表现在在作业区机关页面打开隐藏的form表单，应该显示作业区机关的Form
        this.zyqjgFormVisible = true;
        if (handle === "check") {
          // this.zyqjgForm = row;
          // this.myDialogTitle = "作业区机关信息查看";
          // this.ischeck = true;
          // this.$message({ message: "成功打开", type: "success" });
          this.myDialogTitle = "信息查看";
          if (row.approveStatus == 0) {
            this.ischeckSh = true;
          } else {
            this.ischeckSh = false;
          }
          this.ischeck = true;
          this.isInput = true; // 1.表单禁用
          // this.isAble = false;
          // this.syjForm = row
          this.$objCopy(row, this.zyqjgForm); //把当前要编辑的数据复制到数据域，给表单回显
          this.$message({ message: "成功打开", type: "success" });
        } else if (handle === "edit") {
          // this.zyqjgForm.unit = "作业区机关";
          // this.zyqjgForm = row;
          // this.myDialogTitle = "作业区机关信息编辑";
          // this.ischeck = false;
          // this.$message({ message: "编辑成功", type: "success" });
          this.isAble = true;
          if (row.approveStatus != 2) {
            this.myDialogTitle = "信息编辑";
            this.ischeck = false;
            this.ischeckSh = false;
            this.isInput = false;
            this.$objCopy(row, this.zyqjgForm); //把当前要编辑的数据复制到数据域，给表单回显
          } else {
            this.zyqjgFormVisible = false;
            this.$message({ message: "已通过不可修改！", type: "error" });
          }
        } else if (handle === "add") {
          // this.$resetForm("zyqjgForm", this.zyqjgForm); //清空表单数据
          // this.myDialogTitle = "作业区机关信息填报";
          // this.ischeck = false;
          // this.$message({ message: "添加成功", type: "success" });
          this.$resetForm("zyqjgForm", this.zyqjgForm); //清空表单数据
          this.myDialogTitle = "信息填报";
          this.ischeck = false;
          this.ischeckSh = false;
          this.isInput = false;
          this.isAble = false;
          //同时其他的Form设置为false
          this.d14dFormVisible = false;
          this.d16wsdFormVisible = false;
          this.d18dFormVisible = false;
          this.s382dFormVisible = false;
          this.d162dFormVisible = false;
          this.s371dFormVisible = false;
          this.yjqxdFormVisible = false;
          this.dgdFormVisible = false;
          this.stFormVisible = false;
        }
      } else if (this.currentPageName === "东14队") {
        // 代表现在在东14队页面打开隐藏的form表单，应该显示东14队的Form
        this.d14dFormVisible = true;
        if (handle === "check") {
          this.d14dForm = row;
          this.myDialogTitle = "东14队信息查看";
          this.ischeck = true;
          this.$message({ message: "成功打开", type: "success" });
        } else if (handle === "edit") {
          this.d14dForm = row;
          this.myDialogTitle = "东14队信息编辑";
          this.ischeck = false;
          this.$message({ message: "编辑成功", type: "success" });
        } else if (handle === "add") {
          this.$resetForm("d14dForm", this.d14dForm); //清空表单数据
          this.myDialogTitle = "东14队信息填报";
          this.ischeck = false;
          this.$message({ message: "添加成功", type: "success" });
        }
        this.zyqjgFormVisible = false;
        this.d16wsdFormVisible = false;
        this.d18dFormVisible = false;
        this.s382dFormVisible = false;
        this.d162dFormVisible = false;
        this.s371dFormVisible = false;
        this.yjqxdFormVisible = false;
        this.dgdFormVisible = false;
        this.stFormVisible = false;
      } else if (this.currentPageName === "东16污水队") {
        // 代表现在在东16污水队页面打开隐藏的form表单，应该显示东16污水队的Form
        this.d16wsdFormVisible = true;

        if (handle === "check") {
          this.d16wsdForm = row;
          this.myDialogTitle = "东16污水队信息查看";
          this.ischeck = true;
          this.$message({ message: "成功打开", type: "success" });
        } else if (handle === "edit") {
          this.d16wsdForm = row;
          this.myDialogTitle = "东16污水队信息编辑";
          this.ischeck = false;
          this.$message({ message: "编辑成功", type: "success" });
        } else if (handle === "add") {
          this.$resetForm("d16wsdForm", this.d16wsdForm); //清空表单数据
          this.myDialogTitle = "东16污水队信息填报";
          this.ischeck = false;
          this.$message({ message: "添加成功", type: "success" });
        }
        this.zyqjgFormVisible = false;
        this.d14dFormVisible = false;
        this.d18dFormVisible = false;
        this.s382dFormVisible = false;
        this.d162dFormVisible = false;
        this.s371dFormVisible = false;
        this.yjqxdFormVisible = false;
        this.dgdFormVisible = false;
        this.stFormVisible = false;
      } else if (this.currentPageName === "东18队") {
        // 代表现在在东18队页面打开隐藏的form表单，应该显示东18队的Form
        this.d18dFormVisible = true;

        if (handle === "check") {
          this.d18dForm = row;
          this.myDialogTitle = "东18队信息查看";
          this.ischeck = true;
          this.$message({ message: "成功打开", type: "success" });
        } else if (handle === "edit") {
          this.d18dForm = row;
          this.myDialogTitle = "东18队信息编辑";
          this.ischeck = false;
          this.$message({ message: "编辑成功", type: "success" });
        } else if (handle === "add") {
          this.$resetForm("d18dForm", this.d18dForm); //清空表单数据
          this.myDialogTitle = "东18队信息填报";
          this.ischeck = false;
          this.$message({ message: "添加成功", type: "success" });
        }
        this.zyqjgFormVisible = false;
        this.d14dFormVisible = false;
        this.d16wsdFormVisible = false;
        this.s382dFormVisible = false;
        this.d162dFormVisible = false;
        this.s371dFormVisible = false;
        this.yjqxdFormVisible = false;
        this.dgdFormVisible = false;
        this.stFormVisible = false;
      } else if (this.currentPageName === "升382队") {
        // 代表现在在升382队页面打开隐藏的form表单，应该显示升382队的Form
        this.s382dFormVisible = true;

        if (handle === "check") {
          this.s382dForm = row;
          this.myDialogTitle = "升382队信息查看";
          this.ischeck = true;
          this.$message({ message: "成功打开", type: "success" });
        } else if (handle === "edit") {
          this.s382dForm = row;
          this.myDialogTitle = "升382队信息编辑";
          this.ischeck = false;
          this.$message({ message: "编辑成功", type: "success" });
        } else if (handle === "add") {
          this.$resetForm("s382dForm", this.s382dForm); //清空表单数据
          this.myDialogTitle = "升382队信息填报";
          this.ischeck = false;
          this.$message({ message: "添加成功", type: "success" });
        }
        this.zyqjgFormVisible = false;
        this.d14dFormVisible = false;
        this.d16wsdFormVisible = false;
        this.d18dFormVisible = false;
        this.d162dFormVisible = false;
        this.s371dFormVisible = false;
        this.yjqxdFormVisible = false;
        this.dgdFormVisible = false;
        this.stFormVisible = false;
      } else if (this.currentPageName === "东162队") {
        // 代表现在在东162队页面打开隐藏的form表单，应该显示东162队的Form
        this.d162dFormVisible = true;

        if (handle === "check") {
          this.d162dForm = row;
          this.myDialogTitle = "东162队信息查看";
          this.ischeck = true;
          this.$message({ message: "成功打开", type: "success" });
        } else if (handle === "edit") {
          this.d162dForm = row;
          this.myDialogTitle = "东162队信息编辑";
          this.ischeck = false;
          this.$message({ message: "编辑成功", type: "success" });
        } else if (handle === "add") {
          this.$resetForm("d162dForm", this.d162dForm); //清空表单数据
          this.myDialogTitle = "东162队信息填报";
          this.ischeck = false;
          this.$message({ message: "添加成功", type: "success" });
        }
        this.zyqjgFormVisible = false;
        this.d14dFormVisible = false;
        this.d16wsdFormVisible = false;
        this.d18dFormVisible = false;
        this.s382dFormVisible = false;
        this.s371dFormVisible = false;
        this.yjqxdFormVisible = false;
        this.dgdFormVisible = false;
        this.stFormVisible = false;
      } else if (this.currentPageName === "升371队") {
        // 代表现在在升371队页面打开隐藏的form表单，应该显示升371队的Form
        this.s371dFormVisible = true;

        if (handle === "check") {
          this.s371dForm = row;
          this.myDialogTitle = "升371队信息查看";
          this.ischeck = true;
          this.$message({ message: "成功打开", type: "success" });
        } else if (handle === "edit") {
          this.s371dForm = row;
          this.myDialogTitle = "升371队信息编辑";
          this.ischeck = false;
          this.$message({ message: "编辑成功", type: "success" });
        } else if (handle === "add") {
          this.$resetForm("s371dForm", this.s371dForm); //清空表单数据
          this.myDialogTitle = "升371队信息填报";
          this.ischeck = false;
          this.$message({ message: "添加成功", type: "success" });
        }
        this.zyqjgFormVisible = false;
        this.d14dFormVisible = false;
        this.d16wsdFormVisible = false;
        this.d18dFormVisible = false;
        this.s382dFormVisible = false;
        this.d162dFormVisible = false;
        this.yjqxdFormVisible = false;
        this.dgdFormVisible = false;
        this.stFormVisible = false;
      } else if (this.currentPageName === "应急抢险队") {
        // 代表现在在应急抢险队页面打开隐藏的form表单，应该显示应急抢险队的Form
        this.yjqxdFormVisible = true;

        if (handle === "check") {
          this.yjqxdForm = row;
          this.myDialogTitle = "应急抢险队信息查看";
          this.ischeck = true;
          this.$message({ message: "成功打开", type: "success" });
        } else if (handle === "edit") {
          this.yjqxdForm = row;
          this.myDialogTitle = "应急抢险队信息编辑";
          this.ischeck = false;
          this.$message({ message: "编辑成功", type: "success" });
        } else if (handle === "add") {
          this.$resetForm("yjqxdForm", this.yjqxdForm); //清空表单数据
          this.myDialogTitle = "应急抢险队信息填报";
          this.ischeck = false;
          this.$message({ message: "添加成功", type: "success" });
        }
        this.zyqjgFormVisible = false;
        this.d14dFormVisible = false;
        this.d16wsdFormVisible = false;
        this.d18dFormVisible = false;
        this.s382dFormVisible = false;
        this.d162dFormVisible = false;
        this.s371dFormVisible = false;
        this.dgdFormVisible = false;
        this.stFormVisible = false;
      } else if (this.currentPageName === "地工队") {
        // 代表现在在地工队页面打开隐藏的form表单，应该显示地工队的Form
        this.dgdFormVisible = true;

        if (handle === "check") {
          this.dgdForm = row;
          this.myDialogTitle = "地工队信息查看";
          this.ischeck = true;
          this.$message({ message: "成功打开", type: "success" });
        } else if (handle === "edit") {
          this.dgdForm = row;
          this.myDialogTitle = "地工队信息编辑";
          this.ischeck = false;
          this.$message({ message: "编辑成功", type: "success" });
        } else if (handle === "add") {
          this.$resetForm("dgdForm", this.dgdForm); //清空表单数据
          this.myDialogTitle = "地工队信息填报";
          this.ischeck = false;
          this.$message({ message: "添加成功", type: "success" });
        }
        this.zyqjgFormVisible = false;
        this.d14dFormVisible = false;
        this.d16wsdFormVisible = false;
        this.d18dFormVisible = false;
        this.s382dFormVisible = false;
        this.d162dFormVisible = false;
        this.s371dFormVisible = false;
        this.yjqxdFormVisible = false;
        this.stFormVisible = false;
      } else if (this.currentPageName === "食堂") {
        // 代表现在在食堂页面打开隐藏的form表单，应该显示食堂的Form
        this.stFormVisible = true;

        if (handle === "check") {
          this.stForm = row;
          this.myDialogTitle = "食堂信息查看";
          this.ischeck = true;
          this.$message({ message: "成功打开", type: "success" });
        } else if (handle === "edit") {
          this.stForm = row;
          this.myDialogTitle = "食堂信息编辑";
          this.ischeck = false;
          this.$message({ message: "编辑成功", type: "success" });
        } else if (handle === "add") {
          this.$resetForm("stForm", this.stForm); //清空表单数据
          this.myDialogTitle = "食堂信息填报";
          this.ischeck = false;
          this.$message({ message: "添加成功", type: "success" });
        }
        this.zyqjgFormVisible = false;
        this.d14dFormVisible = false;
        this.d16wsdFormVisible = false;
        this.d18dFormVisible = false;
        this.s382dFormVisible = false;
        this.d162dFormVisible = false;
        this.s371dFormVisible = false;
        this.yjqxdFormVisible = false;
        this.dgdFormVisible = false;
      }
    },
    uploadData() {
      console.log("批量导入成功");
    },

    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      // this.pageNo = 1;
      this.pageSize = val;
      this.search();
      // this.search(this.pageNo, val);
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNo = val;
      this.search();
    },
    // 序号计算
    indexMethod(index) {
      // index默认在0开始，这里+1
      return index + 1 + (this.pageNo - 1) * this.pageSize;
    },
    filterTime() {
      var date = new Date();
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      this.currentTime = y + "-" + m + "-" + d;
    },
    //日期查询点击事件
    reload() {
      this.tableData = [];

      console.log(1010);
      console.log(this.value1[0]); //value1[0] 开始时间 value1[1] 结束时间
      this.startDate = this.value1[0];
      this.endDate = this.value1[1];
      this.search();
      //  console.log(this.value1[0]);
      //this.$refs.table.reload({ page: 1 });
    },

    //Tab标签区域切换按钮事件
    handleMenuClick(tab, event) {
      var content = event.target.innerText;
      if (content === "作业区机关") {
        this.currentPageName = "作业区机关";
        this.search();
        this.zyqjgVisable = true;
        this.d14dVisable = false;
        this.d16wsdVisable = false;
        this.d18dVisable = false;
        this.s382dVisable = false;
        this.d162dVisable = false;
        this.s371dVisable = false;
        this.yjqxdVisable = false;
        this.dgdVisable = false;
        this.stVisable = false;
      } else if (content === "东14队") {
        this.currentPageName = "东14队";
        this.search();
        this.zyqjgVisable = false;
        this.d14dVisable = true;
        this.d16wsdVisable = false;
        this.d18dVisable = false;
        this.s382dVisable = false;
        this.d162dVisable = false;
        this.s371dVisable = false;
        this.yjqxdVisable = false;
        this.dgdVisable = false;
        this.stVisable = false;
      } else if (content === "东16污水队") {
        this.currentPageName = "东16污水队";
        this.search();
        this.zyqjgVisable = false;
        this.d14dVisable = false;
        this.d16wsdVisable = true;
        this.d18dVisable = false;
        this.s382dVisable = false;
        this.d162dVisable = false;
        this.s371dVisable = false;
        this.yjqxdVisable = false;
        this.dgdVisable = false;
        this.stVisable = false;
      } else if (content === "东18队") {
        this.currentPageName = "东18队";
        this.search();
        this.zyqjgVisable = false;
        this.d14dVisale = false;
        this.d16wsdVisable = false;
        this.d18dVisable = true;
        this.s382dVisable = false;
        this.d162dVisable = false;
        this.s371dVisable = false;
        this.yjqxdVisable = false;
        this.dgdVisable = false;
        this.stVisable = false;
      } else if (content === "升382队") {
        this.currentPageName = "升382队";
        this.search();
        this.zyqjgVisable = false;
        this.d14dVisable = false;
        this.d16wsdVisable = false;
        this.d18dVisable = false;
        this.s382dVisable = true;
        this.d162dVisable = false;
        this.s371dVisable = false;
        this.yjqxdVisable = false;
        this.dgdVisable = false;
        this.stVisable = false;
      } else if (content === "东162队") {
        this.currentPageName = "东162队";
        this.search();
        this.zyqjgVisable = false;
        this.d14dVisable = false;
        this.d16wsdVisable = false;
        this.d18dVisable = false;
        this.s382dVisable = false;
        this.d162dVisable = true;
        this.s371dVisable = false;
        this.yjqxdVisable = false;
        this.dgdVisable = false;
        this.stVisable = false;
      } else if (content === "升371队") {
        this.currentPageName = "升371队";
        this.search();
        this.zyqjgVisable = false;
        this.d14dVisable = false;
        this.d16wsdVisable = false;
        this.d18dVisable = false;
        this.s382dVisable = false;
        this.d162dVisable = false;
        this.s371dVisable = true;
        this.yjqxdVisable = false;
        this.dgdVisable = false;
        this.stVisable = false;
      } else if (content === "应急抢险队") {
        this.currentPageName = "应急抢险队";
        this.search();
        this.zyqjgVisable = false;
        this.d14dVisable = false;
        this.d16wsdVisable = false;
        this.d18dVisable = false;
        this.s382dVisable = false;
        this.d162dVisable = false;
        this.s371dVisable = false;
        this.yjqxdVisable = true;
        this.dgdVisable = false;
        this.stVisable = false;
      } else if (content === "地工队") {
        this.currentPageName = "地工队";
        this.search();
        this.zyqjgVisable = false;
        this.d14dVisable = false;
        this.d16wsdVisable = false;
        this.d18dVisable = false;
        this.s382dVisable = false;
        this.d162dVisable = false;
        this.s371dVisable = false;
        this.yjqxdVisable = false;
        this.dgdVisable = true;
        this.stVisable = false;
      } else {
        this.currentPageName = "食堂";
        this.search();
        this.zyqjgVisable = false;
        this.d14dVisable = false;
        this.d16wsdVisable = false;
        this.d18dVisable = false;
        this.s382dVisable = false;
        this.d162dVisable = false;
        this.s371dVisable = false;
        this.yjqxdVisable = false;
        this.dgdVisable = false;
        this.stVisable = true;
      }
      console.log(this.currentPageName);
    },
    // close() {
    //   //作业区机关编辑框是否显示
    //   this.zyqjgFormVisible = false;
    //   //东14队编辑框是否显示
    //   this.d14dFormVisible = false;
    //   //东16污水队编辑框是否显示
    //   this.d16wsdFormVisible = false;
    //   //东18队编辑框是否显示
    //   this.d18dFormVisible = false;
    //   //升382队编辑框是否显示
    //   this.s382dFormVisible = false;
    //   //东162队编辑框是否显示
    //   this.d162dFormVisible = false;
    //   //升371队编辑框是否显示
    //   this.s371dFormVisible = false;
    //   //应急抢险队编辑框是否显示
    //   this.yjqxdFormVisible = false;
    //   //地工队编辑框是否显示
    //   this.dgdFormVisible = false;
    //   //食堂编辑框是否显示
    //   this.stFormVisible = false;
    //   this.search();
    // },
    submitForm(formName) {
      //表单验证
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = null;
          console.log("this.zyqjgForm.id", this.zyqjgForm.id);
          //判断菜单ID是否为空,则说明是添加
          if (
            typeof this.zyqjgForm.id != "undefined" &&
            this.zyqjgForm.id != 0
          ) {
            console.log("zyqjgForm", this.zyqjgForm);
            //发送修改请求
            this.zyqjgForm.approveStatus = 0;
            // console.log(334345)
            res = await zyqysjzyqktjApi.updateZyqysjzyqktj(this.zyqjgForm);
          } else {
            this.zyqjgForm.rq = moment().format("YYYY-MM-DD");
            //发送添加请求
            console.log("zyqjgForm", this.zyqjgForm);
            res = await zyqysjzyqktjApi.addZyqysjzyqktj(this.zyqjgForm);
            console.log("res", res);
          }
          console.log(res);
          //判断是否成功
          if (res.success) {
            this.$message.success(res.message);
            //刷新
            this.search();
            //关闭窗口
            this.zyqjgFormVisible = false;
          } else {
            console.log(res);
            this.$message.error(res.message);
          }
        }
      });
    },
    async submitSh(formName) {
      let res = null;
      //发送修改请求
      this.zyqjgForm.approveStatus = 1;
      this.zyqjgrm.approveBz = "";
      // console.log(334345)
      res = await zyqysjzyqktjApi.updateZyqysjzyqktj(this.zyqjgForm);

      console.log(res);
      //判断是否成功
      if (res.success) {
        this.$message.success(res.message);
        //刷新
        this.search();
        //关闭窗口
        this.dialogFormVisible = false;
      } else {
        console.log(res);
        this.$message.error(res.message);
      }
    },
    uploadFiles() {
      this.importDialog = true;
      this.urlFile = "";
    },
    cancelUpload() {
      this.urlFile = "";
      this.fileList = [];
      this.importDialog = false;
    },
    //  监听改变
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    // 移除
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    beforeAvatarUpload(file) {
      //1MB=1024*1024(1MB=1024KB 1KB=1024MB)
      const is10M = file.size / 1024 / 1024 < 10;
      //限制文件上传大小
      if (!is10M) {
        this.$message.error("上传图片大小不能超过 10MB!");
        return false;
      }
      return true;
    },
    //上传成功之后清除历史记录
    // handleSuccess(fileList) {
    //   this.fileList = [];
    //   this.$refs['fileForm'].upload.clearFiles()
    // },
    // 自定义上传Excel方法
    httpRequest(param) {
      // console.log(param.file);
      this.uploading = true;
      const File = this.fileList[0].raw;
      // const File = param.file
      console.log(File);
      // console.log(this.fileList);
      let formData = new FormData();
      formData.append("myfile", File);
      console.log(formData.get("myfile"));

      axios({
        url: "http://47.108.251.250:3296/api/fileAbout/fileUpload",
        method: "post",
        headers: {
          token: getToken(),
          "Content-Type": "multipart/form-data",
        },
        data: formData,
      }).then(
        (response) => {
          if (response.data.success === true && response.data.data !== "") {
            console.log(response.data);
            this.urlFile = response.data.data;
            console.log(this.urlFile);
            this.$message.success(response.data.message);
            param.onSuccess();
            this.uploading = false;
          } else {
            this.$message.error("上传失败");
          }
        },
        (error) => {
          console.log(error);
          this.$message.error(response.data.message);
        }
      );
    },
    //文件导入
    upload() {
      let formData = new FormData();
      formData.append("filePath", this.urlFile);
      console.log(formData.get("filePath"));
      axios({
        url: "http://47.108.251.250:3296/api/zyqysjzyqktj/batchInput",
        method: "post",
        headers: {
          token: getToken(),
          "Content-Type": "multipart/form-data",
        },
        data: formData,
      }).then(
        (response) => {
          if (response.data.success === true) {
            console.log(response.data);
            this.$message.success(response.data.message);
            //刷新
            this.search();
            //关闭窗口
            this.importDialog = false;
            this.fileList = [];
          } else {
            this.$message.error("导入失败");
          }
        },
        (error) => {
          console.log(error);
          this.$message.error(response.data.message);
        }
      );
    },
  },
  watch: {
    activeName(val) {
      if (this.activeName == "first") {
        this.unit = "作业区机关";
        this.search();
      } else if (this.activeName == "second") {
        this.unit = "东14队";
        this.search();
        // this.submitForm();
      } else if (this.activeName == "third") {
        this.unit = "东16污水队";
        this.search();
      } else if (this.activeName == "fourth") {
        this.unit = "东18队";
        this.search();
      } else if (this.activeName == "fifth") {
        this.unit = "升382队";
        this.search();
      } else if (this.activeName == "sixth") {
        this.unit = "东162队";
        this.search();
      } else if (this.activeName == "seventh") {
        this.unit = "升371队";
        this.search();
      } else if (this.activeName == "eighth") {
        this.unit = "应急抢险队";
        this.search();
      } else if (this.activeName == "ninth") {
        this.unit = "地工队";
        this.search();
      } else if (this.activeName == "tenth") {
        this.unit = "食堂";
        this.search();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// 标题
.mytitle {
  font-size: large;
  padding-left: 10px;
  margin-bottom: 16px;
  float: left;
}

//按钮组
.myButtons {
  float: right;
}

//格子的样式
.bg-white {
  background: #ffffff;
}

.grid-content {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.calendar ::v-deep .el-button-group::before {
  display: none;
}

.calendar ::v-deep .el-button-group::after {
  display: none;
}

// 分割线样式
.el-divider--horizontal {
  display: block;
  height: 2px;
  width: 100%;
  margin: 24px 0;
}

// 表单各项的样式
.el-form-item {
  margin: 15px 10px 15px 10px;
}
</style>
